<ui:composition template="templateCliente.xhtml"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">

	<ui:define name="adminModificar">
		<style>		
			.ui-widget-content { border: none; padding: 5px; }			
			.ui-widget-content tr td { border: none; color: #00708C; font-family: 'Lato',sans-serif; }
			.ui-button { padding:0px; }
			/* Importante! es para que no muestre el nombre del tipo de elemento en los botones de primefaces */
			.ui-button-text { display: none; }			
			/* Importante! es para que queden los iconos en los botones de primefaces */
			.ui-widget select, .ui-widget button { font-family: 'Glyphicons Halflings'; }
			/* Deja transaprente el form de subida de archivos */
			.ui-fileupload-buttonbar, .ui-widget-header, .ui-corner-top, .ui-fileupload-content, .ui-widget-content { background-color:transparent; }
			.box{ margin:10px;}
		</style>
		
		<p:growl id="mensajes" showDetail="true" life="2000" />	

		<div class="well">
		
			<h:form enctype="multipart/form-data" id="prov" styleClass="form-horizontal" style="margin:20px;">
					
				<fieldset>			
								
				<legend>Proveedor  | #{proveedorBean.nick} </legend>				
												
				<p:growl id="mensajes" showDetail="true" life="2000" sticky="true" autoUpdate="true"/>
	
				<div class="form-group col-lg-6">
				
					<div class="form-group box">
						<div class="input-group pull-left">
							<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>					
							<p:outputLabel label="Mail" value="#{proveedorBean.mail}" styleClass="control-label box" />
						</div>
					</div>				
					
					<div class="form-group box">
						<div class="input-group pull-left">
							<span class="input-group-addon"><span class="glyphicon glyphicon-picture"></span></span>										
							<p:graphicImage value="/Imagenes/Logos/#{proveedorBean.mail}"
											styleClass="media-object logo pull-left box"
											width="100" height="100" id="imgProv" />

						</div>
					</div>

					<div class="form-group box">
						<div class="input-group pull-left">
							<span class="input-group-addon"><span class="glyphicon glyphicon-link"></span></span>
							<p:outputLabel label="URL" value="#{proveedorBean.qr}" styleClass="control-label box" />
						</div>
					</div>

					<div class="form-group box">
						<div class="input-group pull-right">
							<span class="input-group-addon"><span class="glyphicon glyphicon-qrcode"></span></span>
							<p:graphicImage value="/Imagenes/QR/#{proveedorBean.mail}.PNG"
											styleClass="media-object logo pull-left box"
											width="140" height="140" id="qr" />
						</div>
					</div>

				</div>


				<div class="form-group col-lg-6 pull-right">
	
					<div class="form-group box">
						<div class="input-group">
							<p:outputLabel value="#{proveedorBean.nick}" placeholder="Nick" styleClass="control-label box pull-right" />
							<span class="input-group-addon"><span class="glyphicon glyphicon-tag"></span></span>
						</div>
					</div>
		
					<div class="form-group box">
						<div class="input-group">
							<p:outputLabel label="Nombre Completo" value="#{proveedorBean.nomCompleto}" placeholder="Nombre" styleClass="control-label box pull-right" />
							<p:outputLabel label="Apellidos" value="#{proveedorBean.apellido}" placeholder="Apellidos" styleClass="control-label box pull-right" />
							<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
						</div>
					</div>	
						
					<div class="form-group box">
						<div class="input-group">
							<h:outputText value="#{proveedorBean.fechaNto}" styleClass="control-label box pull-right">
								<f:convertDateTime dateStyle="long" pattern="dd/MM/yyyy" for="#{proveedorBean.fechaNto}" />
							</h:outputText>
							<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
						</div>
					</div>
		
					<div class="form-group box">
						<div class="input-group">
							<p:outputLabel label="Movil" value="#{proveedorBean.movil}" placeholder="Movil" styleClass="control-label box pull-right" />
							<span class="input-group-addon"><span class="glyphicon glyphicon-phone"></span></span>
						</div>						
					</div>
					
					<div class="form-group box">
						<div class="input-group">
							<p:outputLabel label="Sexo" id="sexo" value="#{proveedorBean.getSexo(proveedorBean.sexo)}" effect="fade" styleClass="control-label box pull-right" />
							<span class="input-group-addon"><i class="fa fa-male"></i><i class="fa fa-female"></i></span>
				        </div>
					</div>
						
					<div class="form-group box" style="text-align:center; margin: auto;">				
						<br />
						<a href="mailto:#{proveedorBean.mail}?subject=Consultas" class="btn btn-warning" style="margin: 20px;">
						  Contactar | <span class="glyphicon glyphicon-envelope"></span>
						</a>
					</div>
					
				</div>
							             
				</fieldset>		             
			
			</h:form>
		</div>
	
	</ui:define>

</ui:composition>